<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/commen.css"/>
		<link rel="stylesheet" type="text/css" href="css/shopcar.css"/>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/shopcar.js" type="text/javascript" charset="utf-8"></script>
		<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
		<script src="/follow.js" type="text/javascript"></script>
		
		<!--  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>-->
<style>
.container {
  background: #fdfdfd;
  padding: 1rem;
  margin: 3rem auto;
  border-radius: 0.2rem;
  counter-reset: pagination;
  text-align: center;
}
.container:after {
  clear: both;
  content: "";
  display: table;
}
.container ul {
  width: 100%;
}

.large {
  width: 45rem;
}


.pagination ul, li {
  list-style: none;
  display: inline;
  padding-left: 0px;
}

.pagination li {
  counter-increment: pagination;
}
.pagination li:hover a {
  color: #fdfdfd;
  background-color: #1d1f20;
  border: solid 1px #1d1f20;
}
.pagination li.active a {
  color: #fdfdfd;
  background-color: #1d1f20;
  border: solid 1px #1d1f20;
}

.pagination li:first-child a:after {
  content: "<";
}

.pagination li:nth-child(2) {
  counter-reset: pagination;
}

.pagination li:last-child a:after {
  content: ">";
}
.pagination li a {
  border: solid 1px #d6d6d6;
  border-radius: 0.2rem;
  color: #7d7d7d;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  padding: 0.5rem 0.9rem;
}
.pagination li a:after {
  content: " " counter(pagination) " ";
}

.large li a {
  display: none;
}
.large li:first-child a {
  display: inline-block;
}
.large li:first-child a:after {
  content: "<";
}
.large li:nth-child(2) a {
  display: inline-block;
}
.large li:nth-child(3) a {
  display: inline-block;
}
.large li:nth-child(4) a {
  display: inline-block;
}
.large li:nth-child(5) a {
  display: inline-block;
}
.large li:nth-child(6) a {
  display: inline-block;
}
.large li:nth-child(7) a {
  display: inline-block;
}
.large li:nth-child(8) a {
  display: inline-block;
}
.large li:last-child a {
  display: inline-block;
}
.large li:last-child a:after {
  content: ">";
}
.large li:nth-last-child(2) a {
  display: inline-block;
}
.large li:nth-last-child(3) {
  display: inline-block;
}
.large li:nth-last-child(3):after {
  padding: 0 1rem;
  content: "...";
}

</style>
	</head>
	<body>
		<!--头部顶端登录注册栏开始-->
		<div id="box">
			<div id="toplogin" th:include="state :: topstate">
			</div>		
		</div>
		
	<div class="innerbox">		
			<div id="header">
				<a href="###" id="logo"><img src="../bookimg/sousuo.png"/></a>

			<!-- 引入搜索栏 -->
			<div id="searchcontainer" th:include="searchTo :: searchTo">		</div>	       
	  
	       <div class="address">
	       	配送至 <select name="">
	       		<option value="">成都高新区三环内</option>
	       		<option value="">成都高新区三环内</option>
	       		<option value="">成都高新区三环内</option>
	       		<option value="">成都高新区三环内</option>
	            </select>
	       </div>    
	            	
		</div>
	</div>
	<!--全部商品开始-->
	<div id="allshop">
		<p>全部商品（<span th:text="${result.totalElements}"></span>）</p>
		<div class="title">
			<ul>
				<li style="width:800px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品</li>
				<li>单价</li>
			</ul>
		</div>
		<div class="shop spacil">
			<ul th:each="data : ${result.data}">
				<li style="width:150px"><img th:src="|https://${data.goodsImg}|" th:onclick="toTheGoods([[|/goods/${data.goodsId}|]])"/></li>
				<li style="width:600px;font-size:13px" th:text="${data.goodsInfo}"></li>
				<li class="price" style="width:60px;color:red;font-size:18px;font-weight:bold" 
				th:text="|${data.goodsPrice}￥|"></li>			
			</ul>	
		<!-- 点击图片跳转商品详细页 -->
		<script type="text/javascript">
			function toTheGoods(url){
				console.log(url)
				window.location.href=url
			}
		</script>
		</div>
		
		<!--  分頁表 -->
		<div class="container large">
  <div class="pagination">
  	<!-- 内置函数 #numbers.sequence  根据传入的参数生成一个数列-->
    <ul >
		<li > 
			<!-- 如果已经是第0页，则不做任何操作，如果当前页数>1，则减一 -->
			<span th:if="${result.pageNumber} eq 0">
			<a href="javascript:void(0)"></a>
			</span>
			<span th:if="${result.pageNumber} ge 1">
			<a th:href="@{'/search?searchinput='+${result.searchinput}+'&pageNumberTo='+${result.pageNumber-1}}"></a>
			</span>
		</li>
		<!-- 上一页 -->
      	
      	<li th:each="i : ${#numbers.sequence(1,totalPages)}" > 
      	<a th:href="@{'/search?searchinput='+${result.searchinput}+'&pageNumberTo='+${i-1}}"></a>  <!-- 跳转到第几页 从0开始 -->
      	</li>  <!-- 循环 -->
		
		
		<li > 
			<!-- 如果当前是最后一页，则不做反应，如果小于最后一页，则+1 -->
			<span th:if="${result.pageNumber}+1 eq ${totalPages}">
				<a href="javascript:void(0)"></a> 
			</span>
				<!-- less than 小于  less equal 小于等于 -->
			<span th:if="${result.pageNumber}+1 lt ${totalPages}">
				<a th:href="@{'/search?searchinput='+${result.searchinput}+'&pageNumberTo='+${result.pageNumber+1}}"></a>
			</span>
		</li>
		
		<!-- 下一页 -->		
		
    </ul>
    <ul>
    	<li>当前第<span th:text="${result.pageNumber}+1"></span>页</li>
    </ul>
  </div>
</div>
		
		
	</div>
	<!--全部商品结束-->
	<div id="hotbook">
			<div class="content">
				<p><span>猜你喜欢</span></p>
				<ul>
					<li>
						<a href="###"><img src="bookimg/22935553-1_l.jpg"/></a>
						<img src="bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
						<li>
						<a href="###"><img src="bookimg/22935553-1_l.jpg"/></a>
						<img src="bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
						<li>
						<a href="###"><img src="bookimg/22935553-1_l.jpg"/></a>
						<img src="bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
						<li>
						<a href="###"><img src="bookimg/22935553-1_l.jpg"/></a>
						<img src="bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
						<li>
						<a href="###"><img src="bookimg/22935553-1_l.jpg"/></a>
						<img src="bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
						<li>
						<a href="###"><img src="bookimg/22935553-1_l.jpg"/></a>
						<img src="bookimg/03-产品详情页面_03.png"/>
						<p><a href="###">白夜行   东野上吾</a></p>
						<span>推荐</span><img src="bookimg/03-产品详情页面_07.png"/>
						<span class="a">￥：38  </span><span class="b">￥:58</span>
					</li>
					
				</ul>
			</div>
		</div>
		<!--人气单品结束-->
		<div id="ad">
			<a href=""><img src="bookimg/1.bmp"/></a>
		</div>
		<!--送货方式开始-->
		<div id="end">
			<div class="content">
				<ul>
					<li><a href="###"><img src="img/222_13.png"/></a></li>
					<li><a href="###"><img src="img/222_11.png"/></a></li>
					<li><a href="###"><img src="img/222_15.png"/></a></li>
					<li><a href="###"><img src="img/222_17.png"/></a></li>
				</ul>
			</div>
		</div>
		<!--送货方式结束-->
		<!--网页底部开始-->
		<div class="footer">
			<div class="_table">
				<table border="0" cellspacing="2px" cellpadding="8px">
					<tr>
						<th><a href="###">购物指南</a></th>
						<th><a href="###">支付方式</a></th>
						<th><a href="###">订单服务</a></th>
						<th><a href="###">退换货</a></th>
						<th><a href="###">商家服务</a></th>
					</tr>
					<tr>
						<td><a href="###">购物流程</a></td>
						<td><a href="###">货到付款</a></td>
						<td><a href="###">订单配送查询</a></td>
						<td><a href="###">退换货政策</a></td>
						<td><a href="###">商家中心</a></td>
					</tr>
					<tr>
						<td><a href="###">发票制度</a></td>
						<td><a href="###">网上支付</a></td>
						<td><a href="###">订单状态说明</a></td>
						<td><a href="###">自助申请退换货</a></td>
						<td><a href="###">运营服务</a></td>
					</tr>
					<tr>
						<td><a href="###">账户管理</a></td>
						<td><a href="###">礼品卡支付</a></td>
						<td><a href="###">自助取消订单</a></td>
						<td><a href="###">退换货进度查询</a></td>
						<td><a href="###">加入唯品会</a></td>
					</tr>
					<tr>
						<td><a href="###">会员优惠</a></td>
						<td><a href="###">银行转账</a></td>
						<td><a href="###">自助修改订单</a></td>
						<td><a href="###">退款方式和时间</a></td>
						<td><a href="###"></a></td>
					</tr>
				</table>
			</div>
			<div class="logo">
				<a href="###"><img src="img/logo_00.png"/></a>
			</div>
			<div class="end">
				<a href="###">公司简介</a>|
			<a href="###">Investor  Relations</a> |
			<a href="###">网站联盟</a>  |
			<a href="###">乐购招商</a>  |
			<a href="###">机构销售</a>  |
			<a href="###">手机乐购</a>  |
			<a href="###">官方Blog</a>  |
			<a href="###">热词搜索</a>  
			
			</div>
			
			<p>Copyright &copy; 乐购网  2014 - 2016  All Right Reserved </p>
		</div>
		<!--网页底部结束-->
	</body>
</html>
